<!--

    Copyright (c) 2012, Mayocat <hello@mayocat.org>

    This Source Code Form is subject to the terms of the Mozilla Public
    License, v. 2.0. If a copy of the MPL was not distributed with this
    file, You can obtain one at http://mozilla.org/MPL/2.0/.

-->
<h1 class="big">{{'order.title.orders' | translate}}</h1>

<div class="loading" ng-show="isLoading"></div>

<div class="orders row" ng-show="!isLoading">
    <div class="span9">
        <div class="alert alert-info" ng-show="!orders || orders.length <= 0">{{'order.alert.empty' | translate}}</div>

        <table class="table table-hover" ng-show="orders.length > 0">
            <thead>
            <tr>
                <th>{{'order.misc.date' | translate}}</th>
                <th>{{'order.misc.amount' | translate}}</th>
                <th>{{'order.misc.statusShort' | translate}}</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="order in orders"
                ng-click="setRoute('/orders/' + order.slug)"
                ng-class="getClass(order.status)">
                <td>
                    <div>
                        {{order.creationDate | iso8601toLocalDate:'LLL'}}
                    </div>
                    <div>
                        <small>
                            {{order.slug}}
                        </small>
                    </div>
                </td>
                <td>
                    <div>{{order.grandTotal | money:'EUR'}} {{order.currency}}</div>
                    <div>
                        <small>
                            {{'order.misc.itemsNumber' | translate:getTranslationProperties({ order:order }) }}
                        </small>
                    </div>
                </td>
                <td ng-bind="getStatus(order.status)"></td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="well span4" ng-show="orders.length > 0">
        <h2>{{'order.title.turnover' | translate}}</h2>
        <ul class="stats unstyled">
            <li>
                <strong>
                    {{'order.period.today' | translate}}
                    <div>
                        <h4>
                            {{stats.daily.total | money:mainCurrency}} {{mainCurrency}}
                        </h4>
                    </div>
                    <div>{{'order.misc.ordersNumber' | translate:getTranslationProperties({ period:'daily' }) }}</div>
                </strong>
            </li>
            <li>
                {{'order.period.weekly' | translate}}
                <div>
                    <h4>
                        {{stats.weekly.total | money:mainCurrency}} {{mainCurrency}}
                    </h4>
                </div>
                <div>{{'order.misc.ordersNumber' | translate:getTranslationProperties({ period:'weekly' }) }}</div>
            </li>
            <li>
                {{'order.period.monthly' | translate}}
                <div>
                    <h4>
                        {{stats.monthly.total | money:mainCurrency}} {{mainCurrency}}
                    </h4>
                </div>
                <div>{{'order.misc.ordersNumber' | translate:getTranslationProperties({ period:'monthly' }) }}</div>
            </li>
            <li>
                {{'order.period.overall' | translate}}
                <div>
                    <h4>
                        {{stats.forever.total | money:mainCurrency}} {{mainCurrency}}
                    </h4>
                </div>
                <div>{{'order.misc.ordersNumber' | translate:getTranslationProperties({ period:'forever' }) }}</div>
            </li>
        </ul>
    </div>

</div>

<div class="pagination">
    <ul>
        <li ng-repeat="n in range(pages)"
            ng-class="{active: n + 1 == currentPage}"
            ng-click="setPage(n + 1)">
                <a href ng-bind="n + 1">1</a>
        </li>
    </ul>
</div>
